<template>
	<page-wraper>
		<view style="margin-top: 15px;">
			<wd-form ref="form" :model="model">
				<wd-card>
					<wd-picker label="国家" label-width="100px" prop="country_code" v-model="model.country_code"
						:columns="contries" placeholder="请选择国家" :rules="[{ required: true, message: '请选择国家' }]" @confirm="selectCountry" />
				</wd-card>

				<wd-card>
					<wd-input label="姓名" label-width="100px" prop="name" v-model="model.name" placeholder="请输入姓名"
						:rules="[{ required: true, message: '请填写姓名' }]" />
					<wd-input label="手机号码" label-width="100px" prop="phone_number" v-model="model.phone_number"
						placeholder="请输入手机号码" :rules="[{ required: true, message: '请填写手机号码' }]" />
				</wd-card>

				<wd-card>
					<wd-input label="地址行1" label-width="100px" prop="address1" v-model="model.address1"
						placeholder="请输入地址行1" :rules="[{ required: true, message: '请填写地址行1' }]" />
					<wd-input label="地址行2" label-width="100px" prop="address2" v-model="model.address2" />

					<wd-input label="城市" label-width="100px" prop="city" v-model="model.city" placeholder="请输入城市"
						:rules="[{ required: true, message: '请填写城市' }]" />
					<wd-picker label="省/州" label-width="100px" prop="state_code" v-model="model.state_code"
						:columns="states" placeholder="请选择省/州" :rules="[{ required: true, message: '请选择省/州' }]" />
					<wd-input label="邮编" label-width="100px" prop="postal_code" v-model="model.postal_code"
						placeholder="请输入邮编" :rules="[{ required: true, message: '请填写邮编' }]" />

					<view class="footer">
						<wd-button type="primary" size="large" @click="handleSubmit" block>保存</wd-button>
					</view>
				</wd-card>
			</wd-form>
		</view>
	</page-wraper>
</template>
<script lang="ts" setup>
	import { ref } from 'vue'

	const model = ref<any>(uni.getStorageSync('params') || {});
	const contries = ref<any>([]);
	const states = ref<any>([]);

	uni.$http.get('admin/country/country_list').then(res => {
		contries.value = res.data.data.filter(a => a.code2 != 'HK').map(a => { return { value: a.code2, label: a.name } });
	});

	function selectCountry({value}) {
		states.value = [];
		
		uni.$http.get(`main/states/${value}`).then(res => {
			states.value = res.data.data;
		});
	}
	
	selectCountry({ value: model.value.country_code });

	function handleSubmit() {
		uni.$http.post('user/address_book/update', model.value).then(res => {
			uni.showToast({
				title: res.data.msg,
				icon: 'none'
			});

			if (res.data.code === 0) {
				uni.$emit('refreshAddressBook');
				uni.navigateBack();
			}
		});
	}
</script>
<style lang="scss" scoped>
	.wot-theme-dark {
		.title-tip {
			color: rgba(232, 230, 227, 0.8);
		}

		.custom-main {
			color: $-dark-color;
		}

		.custom-sub {
			color: $-dark-color-gray;
		}
	}

	.content,
	.title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.content {
		justify-content: flex-start;
	}

	.title {
		justify-content: space-between;
	}

	.title-tip {
		color: rgba(0, 0, 0, 0.25);
		font-size: 12px;
	}

	.custom-main {
		color: rgba(0, 0, 0, 0.85);
		font-size: 16px;
	}

	.custom-sub {
		color: rgba(0, 0, 0, 0.25);
		font-size: 12px;
	}
</style>